<template>
  <el-dialog
    title="上传文件"
    :visible.sync="centerDialogVisible"
    width="50%"
    center
  >
    <el-card>
      <el-form
        ref="orderForm"
        :model="queryParams"
        size="mini"
        label-width="60px"
      >
        <el-col :span="9">
          <el-form-item label="类型" prop="fileTypeId">
            <el-select
              v-model="queryParams.fileTypeId"
              placeholder="请选择类型"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in fileTypeOptions"
                :key="k"
                :label="fileTypeOptions[v]"
                :value="parseInt(v)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件名" prop="fileName">
            <el-input
              v-model="queryParams.fileName"
              type="text"
              placeholder="请输入文件名"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>

    <el-card>
      <el-upload
        class="upload-demo"
        ref="upload"
        drag
        action="fakeaction"
        :show-file-list="true"
        :http-request="uploadFn"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :auto-upload="true"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <el-button
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="saveWaybillFile"
        v-loading.fullscreen.lock="fullscreenLoading"
      >确定</el-button
      >
    </el-card>
  </el-dialog>
</template>

<script>
  import { ajax } from "@/store/yg/common/utils";
  import axios from "axios";
  import { untransform } from "@/store/yg/common/uri";
  import * as constant from "@/store/yg/common/constant";
  import { m } from "@/store/yg/common/local";

  export default {
    props: {
      fileTypeOptions: {
        type: Object,
        default: function(params) {
          return {};
        }
      },
      data: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    data() {
      return {
        fullscreenLoading: false,
        centerDialogVisible: false,
        queryParams: {
          fileTypeId: "",
          fileName: "",
          tempFilename: ""
        },
        action: "",
        feeData: [],
        fileList: [
          {
            name: "food.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          },
          {
            name: "food2.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }
        ]
      };
    },
    created: function() {
      this.action =
        constant.API_SERVER +
        "/api/consume/upload?uri=/waybill/batchuploadfile/main&f=uploadWaybillFile&type=blank";
    },
    mounted() {},
    methods: {
      uploadFn(params) {
        //自定义上传文件
        const file = params.file,
          fileType = file.type,
          isImage = fileType.indexOf("pdf") !== -1,
          isLt4M = file.size / 1024 / 1024 < 4;
        this.queryParams.fileName = file.name;
        // 这里常规检验，看项目需求而定
        // if (!isImage) {
        //  this.$message.error("只能上传pdf格式!");
        //  return;
        // }

        //if (!isLt4M) {
        //   this.$message.error("只能上传图片大小小于4M");
        //   return;
        //  }
        // 根据后台需求数据格式
        if (
          this.queryParams.fileTypeId === null ||
          "" === this.queryParams.fileTypeId
        ) {
          this.$message.error("请选择类型");
          return;
        }

        const form = new FormData();
        // 文件对象

        form.append("items[]", file);
        form.append("fileTypeId", this.queryParams.fileTypeId);
        form.append("theFileName", this.queryParams.fileName);
        this.fullscreenLoading = true;
        axios({
          method: "post",
          url: this.action,
          data: form
        })
          .then(response => {
            this.fullscreenLoading = false;
            if (response.data.code === 200) {
              this.queryParams.tempFilename = response.data.data["fileUrl"];
            } else {
              let msg = response.data.message ? response.data.message : '可能没配置权限【运单 -> 批量导入文件】';
              this.$notify.error({
                title: "错误",
                message: "上传失败!" + msg
              });
            }
          })
          .catch(error => {
            console.log(error);
            this.$notify.error({
              title: "错误",
              message: "上传失败!"
            });
          });
      },

      saveWaybillFile() {
        var param = {};
        param["fileTypeId"] = this.queryParams.fileTypeId;
        param["fileName"] = this.queryParams.fileName;
        param["waybillId"] = this.data["id"];
        param["fileUrl"] = this.queryParams.tempFilename;
        this.fullscreenLoading = true;
        ajax("saveWaybillFile", param).then(
          res => {
            this.fullscreenLoading = false;
            if (res.code != 200) {
              if (null != res.message) {
                this.$message.error(m(res.message));
              } else {
                this.$message.error("修改失败!");
              }
            } else {
              this.$message.success("修改成功!");
              this.centerDialogVisible = false;
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  };
</script>
